<template>
  <a-modal title="我的信息"
           :visible="show"
           @ok="confirmInfo"
           @cancel="close"
  >
    <a-form style="text-align: center;" :label-col="{span:5}" :wrapper-col="{span:12}">
      <a-form-item label="学院" v-if="userInfo.college">
        <a-input disabled v-model="userInfo.college"></a-input>
      </a-form-item>
      <a-form-item label="班级" v-if="userInfo.class">
        <a-input disabled v-model="userInfo.class"></a-input>
      </a-form-item>
      <a-form-item label="姓名">
        <a-input disabled v-model="userInfo.username"></a-input>
      </a-form-item>
      <a-form-item label="学号">
        <a-input disabled v-model="userInfo.userId"></a-input>
      </a-form-item>
      <a-form-item label="邮箱">
        <a-input v-model="userInfo.email"></a-input>
      </a-form-item>
      <a-form-item label="手机号">
        <a-input v-model="userInfo.phoneNumber"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import updateInfo from "@/api/users/updateInfo";
import getUserInfo from "@/api/users/userInfo";

export default {
  name: "updateInfo",
  props: {
    show: Boolean,
  },
  data() {
    return {
      userInfo: {}
    }
  },
  methods: {
    confirmInfo() {
      updateInfo(this.userInfo.email, this.userInfo.phoneNumber)
          .then(res => {
            this.close();
            if (res.result) {
              this.$message.success("信息修改成功");
            } else {
              this.$message.error(res.msg);
            }
          })
    },
    loadUserInfo() {
      getUserInfo().then(res => {
        if (res.result) {
          this.userInfo = res.data;
        }
      });
    },
    close() {
      this.$emit('close');
    }
  },
  watch: {
    show(old) {
      if (old) {
        this.loadUserInfo();
      }
    }
  }
}
</script>